<template>
  <div class="container">
    <el-row>
      <el-col :span="12" class="container-left">
        <div class="title">青岛市审批服务大厅一体化</div>
        <el-row>
          <el-col :span="8">
            <div class="panel-left-1">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px;">
                <div class="subTit"><img src="../assets/icon/icon-satisfaction.png" width="28px" />全年办件好差评统计</div>
                <div style="display: flex;">
                  <div class="pieChartBox">
                    <div class="pie-tit">非常满意</div>
                    <div id="myChart" :style="{width: '100%', height: '125px'}"></div>
                  </div>
                  <div class="pieChartBox">
                    <div class="pie-tit">满意</div>
                    <div id="myChart_1" :style="{width: '100%', height: '125px'}"></div>
                  </div>
                  <div class="pieChartBox">
                    <div class="pie-tit">不满意</div>
                    <div id="myChart_2" :style="{width: '100%', height: '125px'}"></div>
                  </div>
                  <div class="pieChartBox">
                    <div class="pie-tit">基本满意</div>
                    <div id="myChart_3" :style="{width: '100%', height: '125px'}"></div>
                  </div>
                  <div class="pieChartBox">
                    <div class="pie-tit">非常不满意</div>
                    <div id="myChart_14" :style="{width: '100%', height: '125px'}"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel-left-2">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px;">
                <div class="subTit"><img src="../assets/icon/icon-license.png" width="28px" />证照情况</div>
                <div class="licenseBox">
                  <el-col :span="6" class="item">
                    <span class="num" style="color: #CA91FF;">{{ this.dzzzData.LICENSEDIRCNT }}</span>
                    <div class="tit">证照类型数</div>
                  </el-col>
                  <el-col :span="6" class="item">
                    <span class="num" style="color: #FFF6AE;">{{ this.dzzzData.UNITELICENSECNT }}</span>
                    <div class="tit">统一制证数</div>
                  </el-col>
                  <el-col :span="6" class="item">
                    <span class="num" style="color: #3CD7FF;">{{ this.dzzzData.LICENSEDIRCNT }}</span>
                    <div class="tit">电子证照目录数</div>
                  </el-col>
                  <el-col :span="6" class="item" style="margin-right: 0;">
                    <span class="num" style="color: #88F091;">{{ this.dzzzData.LICENSECNT }}</span>
                    <div class="tit">电子证照累计颁发</div>
                  </el-col>
                </div>
              </div>
            </div>
            <div class="panel-left-3">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px;">
                <div class="subTit"><img src="../assets/icon/icon-handlingMethod.png" width="28px" />本年办理方式统计</div>
                <div id="myChart_4" :style="{width: '100%', height: '335px'}"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="panel-middle-1">
              <div class="bjl-panel">
                <div class="bjl-tit">本年度办件量：</div>
                <ul class="bjl-num"><li v-for="(item, index) in bjlArr" :key="index">{{ item }}</li></ul>
              </div>
              <div id="myChart_6" :style="{width: '100%', height: '700px'}"></div>
            </div>
            <div class="panel-middle-2">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div class="windowNum">
                <table class="windowTable">
                  <thead>
                    <th>楼层</th><th>窗口总数</th><th>综合窗口总数</th>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1层</td><td class="winColor">0</td><td class="totalWinColor">0</td>
                    </tr>
                    <tr>
                      <td>2层</td><td class="winColor">0</td><td class="totalWinColor">0</td>
                    </tr>
                    <tr>
                      <td>3层</td><td class="winColor">0</td><td class="totalWinColor">0</td>
                    </tr>
                    <tr>
                      <td>4层</td><td class="winColor">94</td><td class="totalWinColor">72</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="panel-right-1">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px">
                <div class="subTit">
                  <img src="../assets/icon/icon-reception.png" width="28px" />大厅接待情况
                  <div class="cumulativeNum">
                    <div class="tit">累计取号量：</div>
                    <ul class="totalNum"><li v-for="(item, index) in cumulativeQhArr" :key="index">{{ item }}</li></ul>
                  </div>
                </div>
                <div class="receptionBox">
                  <el-col :span="8" class="item">
                    <span class="tit">正在办理</span>
                    <div class="num">{{ this.dtjdData.workingCount }}</div>
                  </el-col>
                  <el-col :span="8" class="item">
                    <span class="tit">今日取号</span>
                    <div class="num">{{ this.dtjdData.takeCount }}</div>
                  </el-col>
                  <el-col :span="8" class="item" style="padding-top: 30px;">
                    <span class="tit">当前等待</span>
                    <div class="num">{{ this.dtjdData.queueCount }}</div>
                  </el-col>
                </div>
              </div>
            </div>
            <div class="panel-right-2">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px;">
                <div class="subTit"><img src="../assets/icon/icon-agesStatistics.png" width="28px" />大厅疫情防控期间办件量统计</div>
                <div class="licenseBox licenseBox-1">
                  <el-col :span="6" class="item" style="padding-top: 30px;">
                    <span class="num" style="color: #CA91FF;">{{ 195628 }}</span>
                    <div class="tit">大厅人流量</div>
                  </el-col>
                  <el-col :span="6" class="item" style="padding-top: 30px;">
                    <span class="num" style="color: #FFF6AE;">{{ 411257 }}</span>
                    <div class="tit">办件总量</div>
                  </el-col>
                  <el-col :span="6" class="item" style="padding-top: 30px;">
                    <span class="num" style="color: #3CD7FF;">{{ 2366 }}</span>
                    <div class="tit">帮办代办量</div>
                  </el-col>
                  <el-col :span="6" class="item" style="margin-right: 0;padding-top: 30px;">
                    <span class="num" style="color: #88F091;">{{ 26491 }}</span>
                    <div class="tit">邮寄办件量</div>
                  </el-col>
                </div>
                <!-- <div class="subTit"><img src="../assets/icon/icon-agesStatistics.png" width="28px" />办事群众年龄段分布</div>
                <div id="myChart_5" :style="{width: '100%', height: '240px'}"></div> -->
              </div>
            </div>
            <div class="panel-right-3">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px 25px 0;">
                <div class="subTit"><img src="../assets/icon/icon-hots.png" width="28px" />热点事项</div>
              </div>
              <table class="table" style="height: 36px">
                <thead>
                  <th style="width: 3%;">排名</th><th style="width: 20%;">事项名称</th><th style="width: 5%;">办件次数</th>
                </thead>
              </table>
              <div class="hotsBox">
                <ul class="messList">
                  <li v-for="(item, index) in hotsArr" :key="index">
                    <div style="overflow: hidden;">
                      <span class="index">{{ 'TOP ' + (index + 1) }}</span>
                      <span class="tit">{{ item.ITEM_NAME }}</span>
                      <span class="num">{{ item.CNT }}次</span>
                      </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!-- <IndexChild /> -->
      <EnterpriseEstablishment />
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
// import IndexChild from './index-child.vue'
import EnterpriseEstablishment from './enterprise-establishment.vue'

export default {
  name: 'index',
  components: {
    // IndexChild,
    EnterpriseEstablishment
  },
  data () {
    return {
      bjlArr: [], // 本年度办件量
      cumulativeQhArr: [], // 累计取号量
      hotsArr: [], // 热点事项
      growthArr: [ // 企业增长
        {
          title: '酒店饭店类',
          progress: '120'
        }, {
          title: '计算机软件行业',
          progress: '109'
        }, {
          title: '地产建筑相关',
          progress: '96'
        }, {
          title: '拆除城市环境卫生设施审批',
          progress: '76'
        }
      ],
      companyData: {},
      xAxis_data: [], // 办件量趋势x轴数据
      yAxis_data_win: [], // 办件量趋势y轴数据-窗口办理
      yAxis_data_online: [], // 办件量趋势y轴数据-网上办理
      dzzzData: {}, // 电子证照情况数据
      dtjdData: {}, // 大厅接待情况数据
      series_age: [], // 年龄段分布数据
      series_date: [], // 近十二个月日期数据
      series_bjl: [], // 近十二个月办件量数据
    }
  },
  mounted() {
    // 10秒后跳转到index1大屏
    setTimeout(() => {
      this.$router.push({ path: '/construction-project' })
    }, 1000 * 60 * 20)

    this.getElectronicLicense() // 获取电子证照情况数据
    this.getVolumeTrend_window() // 获取办件量趋势数据-窗口办理
    this.getVolumeTrend_online() // 获取办件量趋势数据-网上
    this.getYearBjl() // 获取本年度办件量数据
    this.getBjl() // 获取近12个月办件量数据
    this.getDtjd() // 获取大厅接待情况数据
    this.getAgeDistribution() // 获取年龄段分布比列数据
    this.getHots() // 获取热点事项数据

    this.renderChart_verySatisfied()
    this.renderChart_satisfied()
    this.renderChart_disSatisfied()
    this.renderChart_basicSatisfied()
    this.renderChart_veryDisSatisfied()
  },
  methods: {
    // 获取电子证照情况数据
    getElectronicLicense() {
      this.$http.post(window.SITE_CONFIG.apiURL + '/service652', {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/web/approvalqd/getLicenseStatistics/1.0',
        postdata: {}
      }).then(res => {
        let result = JSON.parse(res.body.result)
        this.dzzzData = result.data[0]
      }).catch(() => {})
    },
    // 获取办件量趋势数据-窗口办理
    getVolumeTrend_window() {
      let postParams = {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/web/approvalqd/getBusinessTrend/1.0',
        postdata: {
          'dateMonth': moment(new Date()).format("YYYY-MM"),
          'applyFrom': 'window'
        }
      }
      this.$http.post(window.SITE_CONFIG.apiURL + '/service638', {
        ...postParams
      }).then(res => {
        let result = res.body
        let arr_x = []
        let arr_y = []
        result.map((item, index) => {
          arr_x.push(item.timeday.substring(8, item.timeday.length))
          arr_y.push(item.cnt)
        })
        this.xAxis_data = arr_x
        this.yAxis_data_win = arr_y

        this.renderChart_handlingMethod()
      }).catch(() => {})
    },
    // 获取办件量趋势数据-网上办理
    getVolumeTrend_online() {
      let postParams = {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/web/approvalqd/getBusinessTrend/1.0',
        postdata: {
          'dateMonth': moment(new Date()).format("YYYY-MM"),
          'applyFrom': 'online'
        }
      }
      this.$http.post(window.SITE_CONFIG.apiURL + '/service638', {
        ...postParams
      }).then(res => {
        let result = res.body
        let arr_x = []
        let arr_y = []
        result.map((item, index) => {
          arr_x.push(item.timeday.substring(8, item.timeday.length))
          arr_y.push(item.cnt)
        })
        this.xAxis_data = arr_x
        this.yAxis_data_online = arr_y

        this.renderChart_handlingMethod()
      }).catch(() => {})
    },
    // 获取本年度办件量数据
    getYearBjl() {
      this.$http.post(window.SITE_CONFIG.apiURL + '/service637', {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/web/approvalqd/getBusinessCount/1.0',
        postdata: {}
      }).then(res => {
        let result = JSON.parse(res.body.result)
        this.bjlArr = result.data[0].CNT.split('')
      }).catch(() => {})
    },
    // 获取近12个月办件量数据
    getBjl() {
      this.$http.post(window.SITE_CONFIG.apiURL + '/service654', {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/web/approvalqd/getBusinessTrendYear/1.0',
        postdata: {}
      }).then(res => {
        let result = JSON.parse(res.body.result)
        let arr_date = []
        let arr_bjl = []
        result.data.map(item => {
          let month = item.TIMEMONTH.split('-')
          arr_date.push({
            name: month[0] + '年' + month[1] + '月',
            value: 1,
            cnt: item.CNT
          })

          arr_bjl.push({
            name: item.TIMEMONTH,
            value: item.CNT
          })
        })
        this.series_date = arr_date
        this.series_bjl = arr_bjl

        this.renderChart_handlingQuantity()
      }).catch(() => {})
    },
    // 获取大厅接待情况数据
    getDtjd() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service650', {}).then(res => {
        let result = res.body
        this.cumulativeQhArr = result.Cnum.toString().split('')
        this.dtjdData = result
      }).catch(() => {})
    },
    // 获取年龄段分布比列数据
    getAgeDistribution() {
      this.$http.post(window.SITE_CONFIG.apiURL + '/service641', {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/web/approvalqd/statisticsByAge/1.0',
        postdata: {}
      }).then(res => {
        let result = res.body
        let arr = []
        result.forEach(n => {
          arr.push({
            name: Object.keys(n)[0] === 'other' ? '其他' : Object.keys(n)[0].substring(2, Object.keys(n)[0].length - 1) + '后',
            value: n[Object.keys(n)[0]]
          })
        })

        this.series_age = arr

        this.renderChart_workAge()
      }).catch(() => {})
    },
    // 获取热点事项数据
    getHots() {
      this.$http.post(window.SITE_CONFIG.apiURL + '/service635', {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/web/approvalqd/hotItem/1.0',
        postdata: {
          regionCode: '',
          userCode: '',
          topN: 10
        }
      }).then(res => {
        let result = JSON.parse(res.body.result)
        let arr = []
        result.data.map((item, index) => {
          arr.push({
            id: index,
            ITEM_NAME: item.ITEM_NAME,
            CNT: item.CNT
          })
        })
        this.hotsArr = arr
      }).catch(() => {})
    },

    // 全年办件好差评统计-非常满意
    renderChart_verySatisfied() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      // 绘制图表
      const handred = 100
      let point = 87.5
      const option = {
        title: {
          text: point + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#ffffff',
            fontSize: '25'
          }
        },
        tooltip: {
          formatter: function(params) {
            return params.name + '：' + params.percent + ' %'
          }
        },
        series: [{
          name: 'circle',
          type: 'pie',
          clockWise: true,
          radius: ['75%', '85%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: point,
            name: '占比',
            itemStyle: {
              normal: {
                color: '#A8FF00',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '剩余',
            value: handred - point,
            itemStyle: {
              normal: {
                color: '#383f62'
              }
            }
          }]
        }]
      }
      myChart.setOption(option)
    },
    // 全年办件好差评统计-满意
    renderChart_satisfied() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_1'))
      // 绘制图表
      const handred = 100
      let point = 0
      const option = {
        title: {
          text: point + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#ffffff',
            fontSize: '25'
          }
        },
        tooltip: {
          formatter: function(params) {
            return params.name + '：' + params.percent + ' %'
          }
        },
        series: [{
          name: 'circle',
          type: 'pie',
          clockWise: true,
          radius: ['75%', '85%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: point,
            name: '占比',
            itemStyle: {
              normal: {
                color: '#FFF100',
                // color: { // 颜色渐变
                //   colorStops: [{
                //     offset: 0,
                //     color: '#4FADFD' // 0% 处的颜色
                //   }, {
                //     offset: 1,
                //     color: '#28E8FA' // 100% 处的颜色1
                //   }]
                // },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '剩余',
            value: handred - point,
            itemStyle: {
              normal: {
                color: '#383f62'
              }
            }
          }]
        }]
      }
      myChart.setOption(option)
    },
    // 全年办件好差评统计-不满意
    renderChart_disSatisfied() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_2'))
      // 绘制图表
      const handred = 100
      let point = 0
      const option = {
        title: {
          text: point + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#ffffff',
            fontSize: '25'
          }
        },
        tooltip: {
          formatter: function(params) {
            return params.name + '：' + params.percent + ' %'
          }
        },
        series: [{
          name: 'circle',
          type: 'pie',
          clockWise: true,
          radius: ['75%', '85%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: point,
            name: '占比',
            itemStyle: {
              normal: {
                color: '#E4007F',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '剩余',
            value: handred - point,
            itemStyle: {
              normal: {
                color: '#383f62'
              }
            }
          }]
        }]
      }
      myChart.setOption(option)
    },
    // 全年办件好差评统计-基本满意
    renderChart_basicSatisfied() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_3'))
      // 绘制图表
      const handred = 100
      let point = 0
      const option = {
        title: {
          text: point + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#ffffff',
            fontSize: '25'
          }
        },
        tooltip: {
          formatter: function(params) {
            return params.name + '：' + params.percent + ' %'
          }
        },
        series: [{
          name: 'circle',
          type: 'pie',
          clockWise: true,
          radius: ['75%', '85%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: point,
            name: '占比',
            itemStyle: {
              normal: {
                color: '#74fbf5',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '剩余',
            value: handred - point,
            itemStyle: {
              normal: {
                color: '#383f62'
              }
            }
          }]
        }]
      }
      myChart.setOption(option)
    },
     // 全年办件好差评统计-非常不满意
    renderChart_veryDisSatisfied() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_14'))
      // 绘制图表
      const handred = 100
      let point = 12.5
      const option = {
        title: {
          text: point + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#ffffff',
            fontSize: '25'
          }
        },
        tooltip: {
          formatter: function(params) {
            return params.name + '：' + params.percent + ' %'
          }
        },
        series: [{
          name: 'circle',
          type: 'pie',
          clockWise: true,
          radius: ['75%', '85%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: point,
            name: '占比',
            itemStyle: {
              normal: {
                color: '#d12e7d',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '剩余',
            value: handred - point,
            itemStyle: {
              normal: {
                color: '#383f62'
              }
            }
          }]
        }]
      }
      myChart.setOption(option)
    },
    // 办理方式统计
    renderChart_handlingMethod() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_4'))
      // 绘制图表
      const option = {
        legend: {
          show: true,
          icon: 'circle',
          right: '0%',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 25,
          textStyle: {
            fontSize: 20,
            color: '#ffffff'
          }
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          // data: this.xAxis_data,
          data: [1,2,3,4,5,6,7,8,9,10,11,12],
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // interval: 1, // 设置x轴每隔几个值显示一个数
            rotate: 0,
            textStyle: {
              fontSize: 16,
              color: '#ffffff'
            },
            margin: 15
          },
          boundaryGap: false
        }],
        yAxis: [{
          name: '件',
          nameTextStyle:{
            color: '#fff',
            fontSize: 18
          },
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 18,
              color: '#ffffff'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '窗口办理',
          type: 'line',
          // data: this.yAxis_data_win,
          data: [1987, 1890, 2389, 2109, 1960, 2398, 2198,  2490, 1978, 1902, 1679, 1590],
          symbolSize: 6,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            color: '#00FFFF'
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              // color: '#fff',
              fontSize: 18
            }
          },
          itemStyle: {
            normal: {
              color: '#00FFFF',
              borderColor: '#00FFFF'
            }
          }
        },{
          name: '网上办理',
          type: 'line',
          // data: this.yAxis_data_online,
          data: [1887, 2090, 1389, 1709, 1860, 2538, 1998,  2090, 2378, 2002, 2190, 1890],
          symbolSize: 6,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            color: '#E4007F'
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              // color: '#fff',
              fontSize: 18
            }
          },
          itemStyle: {
            normal: {
              color: '#E4007F',
              borderColor: '#E4007F'
            }
          },
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#531b42'
              },
              {
                offset: 1,
                color: '#2a143f'
              }
            ])
          }
        }]
      }
      myChart.setOption(option)
    },
    // 办事群众年龄段分布
    renderChart_workAge() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_5'))
      // 绘制图表
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '4%', // 图例距离左的距离
          y: 'center', // 图例上下居中
          // data: ['60后', '70后', '80后', '90后', '其他'],
          textStyle: {
            color: '#ffffff',
            fontSize: 25
          },
          icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 15 // 设置间距
        },
        color: ['#F8E5A8', '#00C7FF', '#946BC8', '#FF9A02', '#DE7A8C'],
        series: [{
          name: '',
          type: 'pie',
          radius: [30, 80],
          center: ['60%', '50%'],
          label: {
            normal: {
              formatter: params => {
                return (
                  params.name + '\n' + params.value + ' ' + params.percent.toFixed(0) + '%'
                )
              },
              fontSize: 23,
              padding: [0, -5, 0, -5],
            }
          },
          data: this.series_age,
        }]
      }
      myChart.setOption(option)
    },
    // 近12个月办件量
    renderChart_handlingQuantity() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_6'))
      // 绘制图表
      const option  = {
        title: {
          text: "本年度办件量",
          left: "center",
          top: "20",
          textStyle: {
            fontSize: 25,
            color: '#00FFFF',
            fontWeight: 700
          },
        },
        angleAxis: {
          type: "category",
          // boundaryGap: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#6d8a92'
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2F74FB'
            }
          },
        },
        radiusAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitArea: { // 极坐标系背景色
            show: true,
            areaStyle: {
              color: '#2763FC'
            }
          },
          z: 0,
        },
        polar: {
          center: ['50%', '55%'],
          radius: '55%',
        },
        series: [
          { // 极坐标系设置
            type: "bar",
            color: ['#08DFF2'],
            coordinateSystem: "polar",
            stack: "a",
            barWidth: '99%',
            // data: this.series_bjl,
            data: [
              {value: 1466, name: '2020年1月'},
              {value: 1005, name: '2020年2月'},
              {value: 1623, name: '2020年3月'},
              {value: 2413, name: '2020年4月'},
              {value: 1960, name: '2020年5月'},
              {value: 1727, name: '2020年6月'},
              {value: 2373, name: '2020年7月'},
              {value: 1818, name: '2020年8月'},
              {value: 2603, name: '2020年9月'},
              {value: 1456, name: '2020年10月'},
              {value: 477, name: '2020年11月'},
              {value: 0, name: '2020年12月'}
            ]
          },
          // {
          //   stack: 'a',
          //   type: 'pie',
          //   radius: ['0%', '55%'],
          //   center: ['50%', '55%'],
          //   roseType: 'area',
          //   label: {
          //     normal: {
          //       show: false
          //     }
          //   },
          //   color: ['#00FFEA', '#199EF7', '#08DFF2'],
          //   // itemStyle: {
          //   //   color: '#6be9eb', // '#08DEF1'
          //   // },
          //   data: this.series_bjl,
          // },
          { // 日期圈设置
            radius: ['55%', '95%'],
            center: ['50%', '55%'],
            type: 'pie',
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function(params) {
                  return '{name|' + params.data.name + '}\n\n{cnt|' + params.data.cnt + '件}'
                },
                rich:{
                  name: {
                    color: '#040F3D',
                    fontWeight: 700,
                    fontSize: 20
                  },
                  cnt: {
                    color: '#08DFF2',
                    fontWeight: 700,
                    fontSize: 22
                  }
                },
                // interval: 0,
                // rotate: 30,
              }
            },
            itemStyle: {
              normal: {
                color: "#3583FF"
              }
            },
            // data: this.series_date,
            data: [
              {value: 1, cnt: 1466, name: '2020年1月'},
              {value: 1, cnt: 1005, name: '2020年2月'},
              {value: 1, cnt: 1623, name: '2020年3月'},
              {value: 1, cnt: 2413, name: '2020年4月'},
              {value: 1, cnt: 1960, name: '2020年5月'},
              {value: 1, cnt: 1727, name: '2020年6月'},
              {value: 1, cnt: 2373, name: '2020年7月'},
              {value: 1, cnt: 1818, name: '2020年8月'},
              {value: 1, cnt: 2603, name: '2020年9月'},
              {value: 1, cnt: 1456, name: '2020年10月'},
              {value: 1, cnt: 477, name: '2020年11月'},
              {value: 1, cnt: 0, name: '2020年12月'}
            ]
          }, { // 外边框的设置
            radius: ['90%', '95%'],
            center: ['50%', '55%'],
            type: 'pie',
            hoverAnimation: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: '#1F4189'
              }
            },
            data: [{ value: 0 }],
          }, { // 边框的设置
            radius: ['99.6%', '100%'],
            center: ['50%', '55%'],
            type: 'pie',
            hoverAnimation: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: '#1d3257'
              }
            },
            data: [{ value: 0 }],
          }

        ],
      }
      myChart.setOption(option)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  width: 4000px;
  height: 1200px;
  background: #050f3b;
  padding: 40px 35px;

  .title {
    height: 103px;
    background: url('../assets/background/bg_tit.png') no-repeat;
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 35px 0;
    background-size: 100%;
    background-position-y: 25px;
  }

  .container-left {
    padding-right: 30px;

    .subTit {
      font-size: 29px;
      color: #00D2FF;
      font-weight: 600;

      img {
        position: relative;
        top: 3px;
        margin-right: 10px;
      }
    }

    .pieChartBox {
      flex: 1;
      text-align: center;
      padding-top: 20px;

      .pie-tit {
        font-size: 24px;
        color: #FEFCE1;
        margin-bottom: 15px;
      }
    }

    .licenseBox {
      padding: 30px 0px;
      overflow: hidden;

      .item {
        width: 135px;
        height: 158px;
        background: #091d4f;
        margin-right: 20px;
        text-align: center;
        padding-top: 15px;
      }

      .num {
        font-size: 40px;
        font-weight: bold;
      }

      .tit {
        font-size: 23px;
        font-weight: bold;
      }
    }

    .licenseBox-1 {
       .num {
        font-size: 37px;
        font-weight: bold;
      }
    }

    .cumulativeNum {
      float: right;

      .tit {
        font-size: 23px;
        color: #00FFF0;
      }

      .totalNum li {
        width: 31px;
        height: 44px;
        float: left;
        background: #002870;
        font-size: 33px;
        color: #00FFF0;
        text-align: center;
        margin-right: 5px;
      }
    }

    .receptionBox {
      text-align: center;

      .item {
        padding-top: 65px;
        .tit {
          font-size: 27px;
          font-weight: 700;
        }

        .num {
          font-size: 38px;
          margin-top: 20px;
          color: #CCFF44;
        }
      }
    }

    .hotsBox {
      padding: 25px 10px;
      height: 280px;
      overflow: hidden;
      box-sizing: border-box;

      .messList {
        height: 280px;
        padding-top: 10px;
        animation: myMove 15s linear infinite;
        animation-fill-mode: forwards;
      }
      @keyframes myMove {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-470px);
        }
      }

      ul li {
        overflow: hidden;
        margin-bottom: 15px;
      }

      .index {
        font-size: 25px;
        font-weight: bold;
        float: left;
        color: #E4007F;
        margin-right: 10px;
      }

      .tit {
        font-size: 25px;
        font-weight: bold;
        float: left;
        width: 430px;
      }

      .num {
        font-size: 29px;
        color: #00FFFF;
        float: right;
      }

      .progressBg {
        width: 100%;
        height: 5.5px;
        background: #141b66;
        margin-top: 17px;
        border-radius: 2px;

        .progress {
          background: linear-gradient(-90deg, #4631F8, #54FFF1);
          border-radius: 2px;
          height: 5.5px;
        }
      }
    }


    .angle {
      position: absolute;
      width: 15px;
      height: 15px;
    }

    .panel-left-1 {
      border: 1px solid rgba(0, 255,255,0.1);
      height: 290px;
      // padding: 25px;
      margin-bottom: 15px;

      .angle-left-top {
        left: 0;
        border-top: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-left-bottom {
        top: 275px;
        left: 0;
        border-bottom: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-right-top {
        left: 641px;
        border-top: 1px solid #037C93;
        border-right: 1px solid #037C93;
      }

      .angle-right-bottom {
        left: 641px;
        top: 275px;
        border-right: 1px solid #037C93;
        border-bottom: 1px solid #037C93;
      }
    }

    .panel-left-2 {
      border: 1px solid rgba(0, 255,255,0.1);
      margin-bottom: 15px;

      .angle-left-top {
        left: 0;
        border-top: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-left-bottom {
        top: 603px;
        left: 0;
        border-bottom: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-right-top {
        left: 641px;
        border-top: 1px solid #037C93;
        border-right: 1px solid #037C93;
      }

      .angle-right-bottom {
        left: 641px;
        top: 603px;
        border-right: 1px solid #037C93;
        border-bottom: 1px solid #037C93;
      }
    }

    .panel-left-3 {
      border: 1px solid rgba(0, 255,255,0.1);
      height: 410px;
      // padding: 25px;

      .angle-left-top {
        left: 0;
        border-top: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-left-bottom {
        top: 1030px;
        left: 0;
        border-bottom: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-right-top {
        left: 641px;
        border-top: 1px solid #037C93;
        border-right: 1px solid #037C93;
      }

      .angle-right-bottom {
        top: 1030px;
        left: 641px;
        border-right: 1px solid #037C93;
        border-bottom: 1px solid #037C93;
      }
    }

    .panel-middle-1 {
      height: 745px;
      padding: 25px;
      margin-bottom: 15px;

      .bjl-panel {
        overflow: hidden;
        .bjl-tit {
          font-size: 29px;
          font-weight: bold;
          float: left;
          line-height: 60px;
        }

        .bjl-num {
          float: left;
        }
        .bjl-num li {
          float: left;
          background: #002870;
          margin-right: 5px;
          font-size: 36px;
          font-weight: bold;
          padding: 3px 6px;
        }
      }
    }

    .panel-middle-2 {
      border: 1px solid rgba(0, 255,255,0.1);
      height: 204px;
      padding: 15px;
      margin: 0 20px 10px;

      .angle-left-top {
        left: 677px;
        bottom: 230px;
        border-top: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-left-bottom {
        left: 677px;
        bottom: 10px;
        border-bottom: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-right-top {
        left: 1277px;
        bottom: 230px;
        border-top: 1px solid #037C93;
        border-right: 1px solid #037C93;
      }

      .angle-right-bottom {
        left: 1277px;
        bottom: 10px;
        border-right: 1px solid #037C93;
        border-bottom: 1px solid #037C93;
      }

      .windowNum {
        .windowTable {
          width: 100%;

          thead th {
            font-size: 23px;
            color: #00D2FF;
            padding: 3px 0;
          }

          tbody tr td {
            font-size: 23px;
            color: #fff;
            padding: 5px 0;
            text-align: center;
            font-weight: 700;

          }
          .winColor {
            color: rgb(136, 240, 145);
          }
          .totalWinColor {
            color: rgb(189, 137, 242);
          }
        }
      }
    }

    .panel-right-1 {
      border: 1px solid rgba(0, 255,255,0.1);
      height: 290px;
      // padding: 25px;
      margin-bottom: 15px;

      .angle-left-top {
        right: 641px;
        border-top: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-left-bottom {
        top: 275px;
        right: 641px;
        border-bottom: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-right-top {
        right: 0;
        border-top: 1px solid #037C93;
        border-right: 1px solid #037C93;
      }

      .angle-right-bottom {
        right: 0;
        top: 275px;
        border-right: 1px solid #037C93;
        border-bottom: 1px solid #037C93;
      }
    }

    .panel-right-2 {
      border: 1px solid rgba(0, 255,255,0.1);
      height: 330px;
      // padding: 25px;
      margin-bottom: 15px;

      .angle-left-top {
        right: 641px;
        border-top: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-left-bottom {
        top: 623px;
        right: 641px;
        border-bottom: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-right-top {
        right: 0;
        border-top: 1px solid #037C93;
        border-right: 1px solid #037C93;
      }

      .angle-right-bottom {
        top: 623px;
        right: 0;
        border-right: 1px solid #037C93;
        border-bottom: 1px solid #037C93;
      }
    }

    .panel-right-3 {
      border: 1px solid rgba(0, 255,255,0.1);
      height: 390px;

      .angle-left-top {
        right: 641px;
        border-top: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-left-bottom {
        top: 1030px;
        right: 641px;
        border-bottom: 1px solid #037C93;
        border-left: 1px solid #037C93;
      }

      .angle-right-top {
        right: 0;
        border-top: 1px solid #037C93;
        border-right: 1px solid #037C93;
      }

      .angle-right-bottom {
        top: 1030px;
        right: 0;
        border-right: 1px solid #037C93;
        border-bottom: 1px solid #037C93;
      }

      .table thead th {
        font-size: 23px;
        color: #00D2FF;
        padding: 3px 0;
        text-align: center;
      }
    }
  }
}
</style>
